<template>
  <div class="box">
    <van-tabs
      v-model="active"
      swipeable
      line-width="10vw"
      title-active-color="dodgerblue"
      color="dodgerblue"
      sticky
    >
      <van-tab title="通过">
        <div style="height:10px;background: #f8f8fa"></div>
        <div
          v-if="list.length==0"
          style="color:silver;font-size:16px"
        >暂无数据</div>
        <van-list
          v-else
          v-model="loading"
          :finished="finished"
          :offset="10"
          :immediate-check="false"
          finished-text="我是有底线的"
          @load="onLoadlist"
        >
          <div
            class="nail_content clearfix"
            v-for="(item,i) in list"
            :key="i"
          >
            <div class="left">
              <span style="font-weight:700;font-size:16px">
                <van-icon name="flower-o" /><span>{{item.event_name}}</span></span>
              <ul>
                <li><span>发起人: </span><span>{{item.user_name}}</span></li>
                <li><span>审批人: </span><span>{{item.end_name}}</span></li>
                <li>{{item.create_date}}</li>
              </ul>

            </div>
            <div class="right">
              <span v-if='item.code_b.indexOf("-") != -1||item.code_b==0'>{{item.code_b}}</span><span v-else>+{{item.code_b}}</span>
              <p v-if="item.status=='通过'">通过</p>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="驳回">
         <div style="height:10px;background: #f8f8fa"></div>
        <div
          v-if="arr.length==0"
          style="color:silver;font-size:16px"
        >暂无数据</div>
        <van-list
          v-else
          v-model="loading"
          :finished="finished"
          :offset="10"
          :immediate-check="false"
          finished-text="我是有底线的"
          @load="onLoadlist"
        >
        <div
          class="nail_content clearfix"
          v-for="(list,j) in arr"
          :key="j"
        >
          <div class="left">
            <span style="font-weight:700;font-size:16px">
              <van-icon name="flower-o" /><span>{{list.event_name}}</span></span>
            <ul>
              <li><span>发起人: </span><span>{{list.user_name}}</span></li>
              <li><span>审批人: </span><span>{{list.end_name}}</span></li>
              <li>{{list.create_date}}</li>
            </ul>

          </div>
          <div class="right">
            <span v-if='item.code_b.indexOf("-") != -1||item.code_b==0'>{{item.code_b}}</span><span v-else>+{{item.code_b}}</span>
            <p
              style="color:silver"
              v-if="list.status=='驳回'"
            >驳回</p>
          </div>
        </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script type="text/javascript">
import { Tab, Tabs, Icon } from "vant";
export default {
  data() {
    return {
      active: 2,
      list: [],
      arr: [],
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 10, // 每页条数
      pageIndex: 1,
      page: 0
    };
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Icon.name]: Icon
  },
  created() {
    this.getAgree(0);
    this.getRefuse();
    
  },
  methods: {
    /**
     * rfj
     * 通过审核
     */
    onLoadlist() {
      const p = this.page;
      this.pageIndex++;
      this.getAgree(p);
    },
    async getAgree(cursor) {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      await this.$http
        .get(
          `yuepoints/myApproval?corpId=${corpId}&userId=${userId}&type=agree&cursor=${cursor}`
        )
        .then(res => {
          const { data,cursor ,errcode} = res.data;
          if(errcode=='0000'){
            if (data.length === 0 || data === null) {
            this.finished = true;
            // this.$toast("数据为空！");
            return;
          }
          if (data.length < this.pageSize) {
            this.finished = true;
          }
          if (this.pageIndex === 1) {
            this.list = data;
          } else {
            this.list = this.list.concat(data);
          }
          if (cursor > 0) {
            this.show = false;
            this.page = cursor;
          }
          }else{
            this.finished = true;
            this.list=[]
          }
          
        })
        .catch(error => {
        })
        .finally(() => {
          this.loading = false;
        });
      // this.list = res.data.data;
    },
    // 驳回
    async getRefuse(cursor) {
       let userId = localStorage.getItem("userId");
         let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const res = await this.$http.get(
        `yuepoints/myApproval?corpId=${corpId}&userId=${userId}&type=refuse&cursor=0`
      ).then(res => {
          const { data,cursor } = res.data;
          if (data.length === 0 || data === null) {
            this.finished = true;
            // this.$toast("数据为空！");
            return;
          }
          if (data.length < this.pageSize) {
            this.finished = true;
          }
          if (this.pageIndex === 1) {
            this.arr = data;
          } else {
            this.arr = this.arr.concat(data);
          }
          if (cursor > 0) {
            this.show = false;
            this.page = cursor;
          }
        })
        .catch(error => {
          this.$toast({
            showClose: true,
            message: "获取资源列表异常{" + error + "}",
            type: "error"
          });
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  margin-bottom: 55px;
  /deep/ .van-icon-flower-o {
    color: #0072ffe0;
    font-size: 20px;
    vertical-align: middle;
  }
  .nail_content {
    font-size: 15px;
    background: #fff;
    // margin-left: 25px;
    padding: 10px 10px 10px 25px;
    border-bottom: 1px solid #c0c0c059;
    ul {
      margin-top: 5px;
      li {
        text-align: left;
      }
      li:last-child {
        font-size: 14px;
        color: silver;
        padding-top: 15px;
        margin-left: -8px;
      }
    }
    div:nth-child(2) {
      margin-top: 7vh;
      p:last-child {
        // padding-top: 25px;
        margin-bottom: 0px;
        color: #0072ffe0;
      }
    }
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
